<template>
  <div class="relative">
    <div class="title">月度优秀员工</div>
    <div class="left2">
      <vue-seamless-scroll :class-option="optionTop" :data="dataFile1">
        <div class="left2-cont" v-for="(item,index) in dataFile1" :key="index">
          <div class="left2-cont-1 flex-center flexColumn">
            <!-- <a-avatar src="@/assets/p_004.png" /> -->
            <div
              style="width:83px;height:83px;border-radius:50%;overflow:hidden;"
              class="flex-center"
            >
              <img :src="require('../../../../assets/album/' + item.img)" alt style="width:83px;" />
            </div>

            <p>{{item.name}}</p>
          </div>
          <div class="left2-cont-2">
            <p class="color1">
              满意度：
              <span class="color2">{{item.cacsi}}</span>
              <span style=" display:inline-block; float:right; color:#ffa40c;">
                <a-icon type="star" />
                <a-icon type="star" />
                <a-icon type="star" />
                <a-icon type="star" />
                <a-icon type="star" />
              </span>
            </p>
            <p>{{item.cont}}</p>
            <p>
              <span class="color3">{{item.time}}</span>
            </p>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      dataFile1: [
        {
          img: '1.jpg',
          name: '丁先兆',
          cacsi: '非常满意',
          xj: '5',
          cont: '龙华人事部，月度集体评选的最优员工',
          time: '2021-08-05 9:00:02',
        },
        {
          img: '2.jpg',
          name: '袁阳',
          cacsi: '非常满意',
          xj: '5',
          cont: '市场拓展中心，业绩量达标最赞员工',
          time: '2021-08-08 9:05:10',
        },
        {
          img: '3.jpg',
          name: '张秀丽',
          cacsi: '非常满意',
          xj: '5',
          cont: '采购资料组，最暖心的大姐',
          time: '2021-08-12 10:20:10',
        },
        {
          img: '4.jpg',
          name: '张高进',
          cacsi: '非常满意',
          xj: '5',
          cont: '企划公关部，集团口号最响亮的声音',
          time: '2021-08-13 11:10:26',
        },
        {
          img: '5.jpg',
          name: '廖星',
          cacsi: '非常满意',
          xj: '5',
          cont: '产品开发部，月度新进汇报最积极的员工',
          time: '2021-08-15 10:15:54',
        },
        {
          img: '6.jpg',
          name: '耿潼飞',
          cacsi: '非常满意',
          xj: '5',
          cont: '产品设计部，月度工作汇报及时，效率最高',
          time: '2021-08-16 14:13:35',
        },
      ],
    }
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 2,
      }
    },
    optionTop() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  watch: {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang='less'>
.relative {
  height: 510px;
  .title {
    font-size: 24px;
    font-weight: 400;
    color: #e9f2f9;
    text-align: center;
  }
  .left2 {
    width: 420px;
    margin: 0 18px;
    height: 470px;
    overflow: auto;
    .left2-cont {
      display: flex;
      justify-content: flex-start;
      height: 158px;
      color: #fff;
      font-size: 16px;
      align-items: center;
      .left2-cont-1 {
        width: 100px;
        text-align: center;
        p {
          margin-top: 1px;
        }
        .ant-avatar {
          width: 83px;
          height: 83px;
        }
      }
      .left2-cont-2 {
        width: 320px;
        p {
          margin: 5px;
        }
      }
    }
  }
  .color1 {
    color: #34c7d6;
  }
  .color2 {
    color: #ffa40c;
  }
  .color3 {
    color: #fff;
    opacity: 0.5;
    font-size: 14px;
  }
}
</style>
